import React, { useEffect, useState } from "react";
import Loadmore from "../../components/Loadmore";
export default function LoadmoreTest1({ id }) {
  const [status, setStatus] = useState("more");
  const [list, setList] = useState([]);

  useEffect(() => {
    loadData();
  }, []);

  const loadData = function () {
    setStatus("loading");
    setTimeout(() => {
      setList(list.concat([1, 2, 3, 4, 5, 6, 7, 8, 9, 10]));
      setStatus("more");
    }, 1000);
  };

  return (
    <div>
      <div style={{ height: "100px", backgroundColor: "pink" }}>头部</div>
      {list.map((v, i) => (
        <div key={i} style={{ height: "70px" }}>
          {v}
        </div>
      ))}
      <Loadmore
        status={status}
        onLoadmore={() => {
          loadData();
        }}
      />
    </div>
  );
}
export async function getServerSideProps(context) {
  console.log("?");
  return { props: { id: 1 } };
}
